<template>
    <div>
        <h1>用户管理</h1>
        <el-divider></el-divider>
        <el-table
                cell-class-name="center"
                :data="list"
                border
                v-loading="tableLoading"
                header-cell-class-name="cell_class_name"
                style="width: 100%;margin-top: 20px">
            <el-table-column
                    align="center"
                    type="index"
                    label="序号"
                    :width="tableIndexWidth">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="可用状态"
                    :width="tableIndexWidth">
                <template slot-scope="scope">
                    <el-button size="mini" :type="scope.row.enable?'success':'danger'"
                               :icon="scope.row.enable?'el-icon-check':'el-icon-error'" circle></el-button>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="name"
                    label="姓名"
            >

            </el-table-column>
            <el-table-column
                    align="center"
                    prop="phone"
                    label="手机号"
            >

            </el-table-column>
            <el-table-column
                    align="center"
                    prop="height"
                    label="身高"
            >

            </el-table-column>
            <el-table-column
                    align="center"
                    prop="weight"
                    label="体重"
            >

            </el-table-column>
            <el-table-column
                    align="center"
                    prop="age"
                    label="年龄"
            >

            </el-table-column>
            <el-table-column
                    align="center"
                    :width="tableTimeWidth"
                    prop="createTimeStr"
                    label="添加时间">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="220">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="success" size="mini" @click="changeState(scope.row,true)">取消冻结</el-button>
                        <el-button type="warning" size="mini" @click="changeState(scope.row,false)">冻结</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <Pagination
                :page-index.sync="queryBean.pageIndex"
                :page-size.sync="queryBean.pageSize"
                @refresh="refresh"
                :items-total="total"
        >

        </Pagination>
        <DangerOperationConfigDialog
                danger
                ref="del_config"
                msg="是否删除选中的内容?"
                @configDone="deleteContent"
                button-name="删除"
        />
    </div>
</template>

<script>
    import Pagination from "../views/Pagination";
    import DangerOperationConfigDialog from "../views/DangerOperationConfigDialog";

    export default {
        name: "CustomManager",
        components: {DangerOperationConfigDialog, Pagination},
        data() {
            return {
                tableLoading: false,
                list: [],
                queryBean: {
                    pageIndex: 0,
                    pageSize: 10
                },
                total: 0,
                delete_id: -1
            }
        },
        created() {
            this.refresh();
        },
        methods: {
            handleDelete: function (bean) {
                this.delete_id = bean.id;
                this.$refs.del_config.show();
            },
            handleAdd: function () {
                this.$refs.BannerManager.show({
                    coverUrl: ''
                });
            },
            handleEdit: function (bean) {
                this.$refs.BannerManager.show(bean);
            },
            refresh: function () {
                this.getList();
            },
            getList: function () {
                var that = this;
                this.requestList('/class_api/custom_user', this.queryBean, function (total, list) {
                    that.tableLoading = false;
                    that.list = list;
                    that.total = total;
                })
            },
            deleteContent: function () {
                var that = this;
                this.requestDelete('/class_api/custom_user/' + this.delete_id, function (res) {
                    that.handleInfo(res, '删除成功!');
                    that.refresh();
                })
            },
            changeState: function (bean, state) {
                var that = this;
                this.requestPut('/class_api/custom_user', {
                    id: bean.id,
                    enable: state
                }, function (res) {
                    that.handleInfo(res, '修改状态成功!');
                    that.refresh();
                })
            }
        }
    }
</script>

<style scoped>

</style>
